<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <link href="css/SYSFrame.css" rel="stylesheet" type="text/css" />
    <link href="font/iconfont.css" rel="stylesheet" type="text/css" />
    <link href="css/module.css" rel="stylesheet" type="text/css" />
    <link href="css/pages.css" rel="stylesheet" type="text/css" />
    <title>单页</title>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/template.js" type="text/javascript"></script>
    <script src="js/jquery.nicescroll.js" type="text/javascript"></script>
    <script src="js/HUpages.js" type="text/javascript"></script>
</head>

<body id="pagestyle" class="pagestyle">
<!--左侧菜单栏-->
<div class="bk-con-menu " id="bk-con-menu">
    <div class="menubtn">
        <span class="close_btn samebtn"><i>隐藏</i></span>
        <span class="show_btn samebtn"><i>显示</i></span>
    </div>
    <div class="title-menu">栏目分类</div>
    <div class="breadcrumb" id="breadcrumb">
        <ul class="clearfix menu-section sortList" id="sortList">

        </ul>
    </div>
</div>
<div class="bk-con-message message-section" id="iframe_box">
    <div class="page_content mb15clearfix">
        <ul class="menulist Article-ope clearfix">
            <li class="column-name l_f">
                <a href="javascript:void(0)" class="btn button_btn btn-danger" onclick=""><i class="iconfont">&#xe6b4</i>&nbsp;批量删除</a>
            </li>
            <li class="column-name l_f">
                <a href="javascript:void(0)" title="添加文章" class="btn button_btn bg-deep-blue menuUl_title" name="add_article.html" data-id="46"><i class="iconfont">&#xe61a</i>添加文章</a>
            </li>
        </ul>
        <div class="Single_page clearfix">
            <ul class="Single_page_list" id="Single_pageLsit">
            </ul>
        </div>
    </div>
</div>
</body>
<script id="sorthtml" type="text/html">
    <% for(var i = 0; i < sorts.length; i++) { %>
    <li class="sort-name">
        <a href="javascript:void(0)" data-id="<%=sorts[i].id%>" class=" active">
            <%=sorts[i].name%>(
            <%=sorts[i].quantity%>)</a>
    </li>
    <% } %>
</script>
<script id="listhtml" type="text/html">
    <% for(var i = 0; i < list.length; i++) { %>
    <li class="page_list_content">
        <a href="#" class="link_name" title="<%=list[i].title%>"></a>
        <a href="javascript:void(0)" onclick="page_delete(this,'<%=list[i].id%>')" class="page_delete  display Single_operate"><i class="iconfont">&#xe627</i></a>
        <a href="javascript:void(0)" onclick="page_modify(this,'<%=list[i].id%>')" class="page_modify  display Single_operate"><i class="iconfont">&#xe61a</i></a>
        <div class="title_name">
            <% if(list[i].status==0) {%>
            <div class="wrap"><span class="ribbon5 pro-type" data-id="0">关闭</span></div>
            <%} if(list[i].status==1) {%>
            <div class="wrap"><span class="ribbon6 pro-type" data-id="1">显示</span></div>
            <%}%>
            <%=list[i].title%>
        </div>
        <div class="page_info">
            <%=list[i].explain%>
        </div>
        <div class="time"><span class="l_f ml10 colorgreen">
       <% for(var s = 0; s < sort.length; s++) { %>
            		<% if(sort[s].id==list[i].sort) {%>
            			    <%=sort[s].name%>
            			<%}%>
                <% } %></span>
            <%=timestamp(list[i].time,'yyyy-MM-dd hh:mm')%>
        </div>
    </li>
    <% } %>
</script>
<script>
    //内页框架
    $(function() {
        $("#pagestyle").Hupage({
            slide: '#breadcrumb',
            padding: 15,
            menuModule: '#bk-con-menu', //菜单模块
            pagecontent: '.page_content', //自定义属性
            scrollbar: function(e) {
                e.niceScroll({
                    cursorcolor: "#dddddd",
                    cursoropacitymax: 1,
                    touchbehavior: false,
                    cursorwidth: "3px",
                    cursorborder: "0",
                    cursorborderradius: "3px",
                });
            },
            expand: function(thisBox, settings) {
                var pc = "";
                $(settings.pagecontent).css("margin-bottom") != null ? pc = parseInt($(settings.pagecontent).css("margin-bottom").replace("px", "")) : '';
                $(settings.pagecontent).css({
                    height: $(window).height() - pc - (settings.padding * 2)
                })
                settings.scrollbar($(settings.slide) && $(settings.pagecontent));
            }
        });
    });
    //获取数据
    function articlelist() {
        var loadMore = function(callback) {
            $.ajax({
                url: "json/pages.json",
                type: "GET",
                dataType: 'json',
                success: function(ret) {
                    typeof callback == 'function' && callback(ret);
                },
            });
        };
        loadMore(function(listArr) {
            var articlehtml = $('#Single_pageLsit');
            var sortListhtml = $('#sortList');
            var shtml = template('sorthtml', {
                sorts: listArr.Sort
            });
            sortListhtml.append(shtml);
            var Column = $('#sortList li.sort-name');
            index = 0;
            Column.eq(index).addClass('active');
            var sortid = Column.eq(index).find('a').attr('data-id');
            for(var i = 0, len = Column.length; i < len; i++) {
                Column.find('a').on('click', function(e) {
                    var id = $(this).attr('data-id');
                    if(id == 0) {
                        articlehtml.html('');
                        var html = template('listhtml', {
                            list: listArr.data,
                            sort: listArr.Sort
                        });
                        articlehtml.append(html);
                    } else {
                        var list = listArr.data;
                        for(var c = 0, len = list.length; c < len; c++) {
                            var menu_node1 = list.filter(function(e) {
                                return e.sort == id;
                            });
                            if(menu_node1 != "") {
                                articlehtml.html('');
                                var html = template('listhtml', {
                                    list: menu_node1,
                                    sort: listArr.Sort
                                });
                                articlehtml.append(html);
                            } else {
                                articlehtml.html('<div class="bare_prompt">还没有相关文章</div>');
                            }
                        }
                    }
                    for (var c = 0, len = Column.length; c < len; c++) {
                        Column.eq(c).removeClass('active');
                        $(this).parent().addClass('active')
                    }
                });
            }
            var html = template('listhtml', {
                list: listArr.data,
                sort: listArr.Sort
            });
            articlehtml.append(html);
            var status = articlehtml.find('.page_list_content');
            for(var i = 0; i < status.length; i++) {
                var statusid = articlehtml.find('.name_status').eq(i).attr('data-id');
                if(statusid != 1) {
                    articlehtml.find('.name_status').eq(i).addClass('statusNO');
                }
            }
        });
    }
    articlelist();
    //删除
    function page_delete(e, id) {
        var loadMore = function(callback) {
            $.ajax({
                url: "json/pages.json",
                type: "GET",
                dataType: 'json',
                success: function(ret) {
                    typeof callback == 'function' && callback(ret);
                },
            });
        };
        loadMore(function(listArr) {
            var lists = listArr.data;
            for(var i = 0; i < lists.length; i++) {
                var j = lists[i];
                if(j.id == id) {
                    lists.splice(i, 1);
                    var articlehtml = $('#Single_pageLsit');
                    articlehtml.html('');
                    var html = template('listhtml', {
                        list: lists,
                        sort: listArr.Sort
                    });
                    articlehtml.append(html);
                }
            }
        })
    }
    //修改
    function page_modify(e, id) {

    }
</script>
<script type="text/javascript" src="js/common.js" ></script>